<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,img{
             margin:0;
             padding:0;
         }
         img{
             float:left;
             height:100px;
             width:100px;
         }
         #div1{
             margin: 0 auto;
             width:600px;
             height:100px;
             overflow: hidden;
             border:solid blue 2px;
         }
         #div2,#div3{
             float:left;
         }
         #div4{
             width:500%;/*这个属性很重要 让容器有足够的宽度实现滚动*/
             float:left;
         }
    </style>
</head>

<body>
    <div id="div1">
                 <div id="div4">
                     <div id="div2">
                        <img src="../001.jpg" alt="图片1"/>
                        <img src="../002.jpg" alt="图片2"/>
                        <img src="../003.jpg" alt="图片3"/>
                        <img src="../004.jpg" alt="图片4"/>
                        <img src="../005.jpg" alt="图片4"/>
                        <img src="../006.jpg" alt="图片4"/>
                    </div>
                    <div id="div3"></div><!--这个容器是用来防止图片滚动时会出现空白的区域-->
                </div>
            </div>
    
</body>
<script type="text/javascript">
         window.onload=function(){
               var div1=document.getElementById('div1');
               var div2=document.getElementById('div2');
               var div3=document.getElementById('div3');
      
               div3.innerHTML= div2.innerHTML;//将v2容器里面的图片插入到v3容器里面  使其空白区域被遮住。
               function fun(){
                 if(div1.scrollLeft<=0){
                    div1.scrollLeft=600;
                }else{
                    div1.scrollLeft--;
                }
            }
    
            var time=setInterval(fun,10);
    
            div1.onmouseover = function() {//鼠标经过时  清除定时器  停止图片的滚动
                    clearInterval(time)
                };
            div1.onmouseout = function() {//鼠标离开后  继续滚动图片
                   time = setInterval(fun, 10)
                };
        }
    
    </script>
</html>